<template>
  <div id="big">
    <div style="background:rgba(225,225,225,0.5);width: 500px;height: 400px;position: relative;left: 35%;top: 20%;border-radius: 40px">
      <img src="../assets/img/loginImg/zc.jpg"
           style="width: 100px;height: 100px;border-radius: 50px;position: absolute;top: -15%;left: 40%">
      <el-form style="position: relative;left: 10%;top: 20%">

        <el-form-item label="账号：" label-width="100px">
        <el-input style="width: 60% ;"
                  placeholder="请输入电话号码"
                  v-model="username"
                  clearable>
        </el-input>
      </el-form-item>

        <el-form-item label="密码：" label-width="100px">
        <el-input style="width: 60% ;"
                  placeholder="请输入密码" v-model="password" show-password></el-input>
        </el-form-item>

          <el-form-item label="确认密码：" label-width="100px">
        <el-input style="width: 60% ;"
                  placeholder="确认密码" v-model="confirmPassword" show-password></el-input>
          </el-form-item>

        <el-form-item label="短信验证：" label-width="100px">
          <el-input v-model="codeInput" style="width: 30%"></el-input>
          <el-button type="warning" @click="this.codefun">发送验证码</el-button>
        </el-form-item>

        <el-button type="warning" @click="addAxios" style="
        position: relative;left: 6%
        ;width: 60%">立刻注册</el-button>
      </el-form>



    </div>

  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "logon",
  data(){
    return{
      username:"",
      password:"",
      confirmPassword:"",
      code:"",
      codeInput:""
    }
  },
  methods:{
    codefun(){
      axios({
        url:"/my/Code",
        method: 'get'
      }).then(res=>{
        this.code = res.data;
        alert("验证码："+this.code)
      })
    },
    addAxios() {
      if (this.password!=this.confirmPassword){
        alert("您的两个密码不一样")
      }
      else if(this.codeInput==""){
        alert("请输入验证码")
      }
     else  if (this.code!=this.codeInput){
        alert("验证码不对！！")
      }else {
        axios({
          url:"/my/logon",
          method:'get',
          params:{
            username:this.username,
            password:this.password
          }
        }).then(res=>{
          if (res.data){
            this.$router.push("/login")
          }else {
            alert("后台出错了")
          }
        })
      }

    }
  }
}
</script>

<style scoped>
#big{
  background: url("../assets/img/loginImg/bj.jpg");
  width: 100%;
  height: 1080px;
  background-repeat: no-repeat;
  background-size:cover ;
  overflow: hidden;
}
</style>
